<template>
  <div style="margin-bottom: 20px;">
    <el-dialog :title="edit_main_title" append-to-body v-dialogDrag :visible.sync="edit_flag"
               @open="handleOpenConfig" :before-close="handleClose" width="980px">
      <!--查询条件-->
      <el-form class="web_form" :inline="true" :class="{'web_form_active': searchFlag }" label-width="100px" style="margin: 6px 0 0 0">
        <el-form-item label="车牌号">
          <el-input v-model="page.condition.plateList" clearable placeholder="请输入" style="width: 184px"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker class="w184"
                          v-model="page.condition.startDate"
                          type="date"
                          value-format = 'yyyy-MM-dd'
                          placeholder="选择日期(开始)">
          </el-date-picker>-
          <el-date-picker class="w184"
                          v-model="page.condition.endDate"
                          type="date"
                          value-format = 'yyyy-MM-dd'
                          placeholder="选择日期(结束)">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="search-box">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <!--table0-->
      <div style="width: 100%;position: relative;margin-bottom: 10px;">
        <el-table
          :data="tableData0"
          ref="mainTable0"
          header-row-class-name="table-header-center"
          border element-loading-text="正在加载中..."
          style="margin: 0 4px;">
          <!--<el-table-column type="selection" width="40"></el-table-column>-->
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableHead0'
                           :label="value.title">
            <template slot-scope="scope">
              <div v-if="value.key === 'gmtCreate'">{{scope.row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</div>
              <div v-else>{{scope.row[value.key]}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="toPlateDetail('车辆列表', scope.row, 'fleet')">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--主列表-->
      <div style="width: 100%;position: relative;">
        <el-table
          :data="tableData"
          ref="mainTable"
          header-row-class-name="table-header-center"
          border element-loading-text="正在加载中..."
          @selection-change="handleSelectionChange"
          style="margin: 0 4px;">
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableHead'
                           :label="value.title">
            <template slot-scope="scope">
              <div v-if="value.key === 'gmtCreate'">{{scope.row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</div>
              <div v-else-if="value.key === 'normalRate' || value.key === 'riskRate' || value.key === 'faultRate'">{{scope.row[value.key] | numToPercentageFilter}}%</div>
              <div v-else>{{scope.row[value.key]}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="toPlateDetail('车辆列表', scope.row, 'plateLicenseNo')">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 8px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
      <!--btn-->
      <!--<el-row type="flex" justify="end" style="margin-top: 20px;">-->
        <!--<el-button type="primary" @click="handleClose">关闭</el-button>-->
      <!--</el-row>-->
      <!--<div style="height:10px"></div>-->
    </el-dialog>
    <!--二级 明细弹窗-->
    <plate-table-detail
      :edit_flag="detailFlag"
      :edit_main_title="detailMainTitle"
      :edit_select_row="detailRowData"
      :edit_params="detailParams"
      ref="plateTableDetailRef"
      @edit-close="plateTableDetailClose">
    </plate-table-detail>
  </div>
</template>

<script type="text/javascript">
  import PlateTableDetail from './plateTableDetail'
  import * as MonitorMgtAPI from '@/api/monitor'
  import * as Utils from '@/utils/index'
  const defaultTableHead0 = [
    { key: 'fleetName', title: '车队公司', width: '120' },
    { key: 'totalDistance', title: '行驶总里程(km)', width: '120' },
    { key: 'fault', title: '设备故障(次)', width: '120' },
    { key: 'faultCnt', title: '故障车辆数', width: '' },
    { key: 'risk', title: '设备风险(次)', width: '120' },
    { key: 'riskCnt', title: '风险车辆数', width: '' },
    { key: 'drivingBehavior', title: '驾驶行为(次)', width: '120' },
    { key: 'drivingBehaviorCnt', title: '驾驶行为车辆数', width: '120' }
    // { key: 'fatigueDriving', title: '疲劳驾驶', width: '' },
    // { key: 'fatigueDrivingCnt', title: '疲劳驾驶车辆数', width: '200' }
  ]
  const defaultTableHead = [
    // { key: 'fleet', title: '车队名称', width: '' },
    { key: 'plateLicenseNo', title: '车牌号', width: '120' },
    { key: 'vin', title: '车架号', width: '' },
    { key: 'normalRate', title: '正常率', width: '' },
    { key: 'riskRate', title: '风险率', width: '' },
    { key: 'faultRate', title: '故障率', width: '' },
    { key: 'risk', title: '风险时长(分钟)', width: '140' },
    { key: 'fault', title: '故障时长(分钟)', width: '140' }
  ]
  // const myDate = new Date()
  export default {
    name: '',
    components: { PlateTableDetail },
    props: ['edit_flag', 'edit_main_title', 'edit_select_row', 'edit_params'],
    data() {
      return {
        tableHead0: defaultTableHead0,
        tableData0: [],
        tableHead: defaultTableHead,
        searchFlag: true,
        tableData: [],
        selectRow: [], // table选中数组
        loadingShow: false,
        page: {
          current: 1,
          size: 10,
          total: 1,
          condition: {
            fleetList: '',
            startDate: Utils.parseTime((new Date().getTime() - 8.64e7), '{y}-{m}-{d}'),
            endDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d}'),
            plateList: ''
          }
        },
        detailParams: {},
        detailFlag: false, // 明细显示
        detailRowData: {}, // 传入明细的当前列
        detailMainTitle: '' // 明细标题
      }
    },
    mounted() {
    },
    methods: {
      // 弹窗页打开初始
      handleOpenConfig(data) {
        this.resetSearch()
        console.log('this.$props.edit_select_row', this.$props.edit_select_row)
        this.tableData0 = []
        this.tableData0.push(this.$props.edit_select_row)
        // this.queryTime1 = myDate.getFullYear() // 设置默认查询日期
        this.getList()
      },
      // 查看 详情 面板
      toPlateDetail(title, row, type) {
        console.log('toPlateDetail()-title', title, row, type)
        const that = this
        that.detailRowData = row
        that.detailMainTitle = title
        that.detailParams = { searchType: type }
        that.detailFlag = true
      },
      // 查看明细 弹窗关闭
      plateTableDetailClose() {
        this.detailFlag = false
      },
      // 主列表分页查询
      getList() {
        const that = this
        // console.log('getList()-queryTime', year, month, day)
        const { fleetName } = this.$props.edit_select_row
        that.page.condition.fleetList = fleetName
        MonitorMgtAPI.getRiskRateForVin(that.page).then(res => {
          const t = res.data
          that.tableData = t.records
          that.page.current = t.current
          that.page.size = t.size
          that.page.total = t.total
        }).catch(err => {
          console.log('error', err)
          that.loadingShow = false
        })
      },
      // 更多
      moreSearch() {
        this.searchFlag = !this.searchFlag
      },
      // 查询
      search() {
        this.page.current = 1
        this.page.size = 10
        this.getList()
      },
      handleSizeChange(val) {
        this.page.size = val
        this.page.current = 1
        this.getList()
      },
      handleCurrentChange(val) {
        this.page.current = val
        this.getList()
      },
      // 重置
      resetSearch() {
        this.ciamsListSelected = []
        this.plainValOne = ''
        this.plainValTwo = ''
        this.page.current = 1
        this.page.size = 10
        this.page.condition = {
          fleetList: '',
          startDate: Utils.parseTime((new Date().getTime() - 8.64e7), '{y}-{m}-{d}'),
          endDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d}'),
          plateList: ''
        }
        // this.getList()
      },
      // 检查是否选择单条
      checkSelect(data) {
        const l = data.length
        if (l === 0) {
          this.$message({
            message: '未选择',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      // 表格改变时
      handleSelectionChange(val) {
        this.selectRow = val
      },
      // 关闭
      handleClose() {
        this.$emit('edit-close', false)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>



